<template>
  <div>
    <div class="top">
      <span>社区</span>
    </div>
    <div class="zan"></div>
    <div class="zhong">
      <div class="middle">
        <!-- 图片区域 -->
        <div class="participate">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps79hssn5sjf8w47318ds4gb5ea8hs9gge78c85b6e0-72d5-4f49-81d5-7bc51b454b4b"
            alt=""
          />
          <span @click="$router.push('/people')">参与活动</span>
        </div>
        <!-- 推荐区域 -->
        <div class="recommend">
          <div class="shang">
            <span class="tui">囍推荐</span>
            <span class="dian" @click="$router.push('/recommend')"
              >点击更多</span
            >
          </div>
          <div class="xia">
            <ul>
              <li>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdqhdvz7lgnuj9zqy5jvw49f60bt7u9otn27a8691a-b40d-4d14-946f-378e63d7e69e"
                  alt=""
                />
                <span>薇拉摄影</span>
              </li>
              <li>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps209ryj3j9ui0wafj4g37ep9woi3qszgg0ide25cf71-ba73-457f-bd3c-5bbdb709f1b2"
                  alt=""
                />
                <span>程睿&nbsp;&nbsp;婚礼专场</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 精选品牌区域 -->
        <div class="choiceness">
          <div class="shang">
            <span class="tui">精选品牌</span>
            <span class="dian">点击更多</span>
          </div>
          <div class="jing">
            <ul>
              <li>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/pss8sl8vo983gmnltk1aqxqcy42ucjqskhr19253ae3-a44c-4ec5-8e10-1c884b58dff4"
                  alt=""
                />
                <span>乐美婚礼策划</span>
              </li>
              <li>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psum95oook7vi5zl9kk87dn5yuu1dc9vgd07ca429-383f-4adb-a793-cd8534eab907"
                  alt=""
                />
                <span>梵尼洛芙</span>
              </li>
              <li>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps24qod5aq0xuj26os141gpienzaxo8kcg1e2b4afde-9afe-463c-888c-dd44080aa794"
                  alt=""
                />
                <span>美泉宫酒店</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 问答泡泡区域 -->
        <div class="answer">
          <p>问答泡泡</p>
          <div class="si">
            <div class="board">
              <div class="ge">
                <span class="wen">问</span>
                <span class="ti">什么婚纱显瘦？</span>
              </div>
              <div class="ge">
                <span class="wen">问</span>
                <span class="ti">在郑州办婚礼标准多少一桌？</span>
              </div>
            </div>
            <div class="board">
              <div class="ge">
                <span class="wen">问</span>
                <span class="ti">如何租车更划算？</span>
              </div>
              <div class="ge">
                <span class="wen">问</span>
                <span class="ti">结婚要买多少套被子？</span>
              </div>
            </div>
            <span class="da">答</span>
          </div>
        </div>
      </div>
    </div>
    <div class="zan2"></div>
    <!-- <div class="bottom"></div> -->
  </div>
</template>
<script></script>
<style scoped>
.top {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 0.8rem;
  padding-bottom: 0.08rem;
  background-color: #dc4949;
  display: flex;
  font-size: 0.28rem;
  justify-content: center;
  align-items: flex-end;
  color: #fff;
  z-index: 3;
}
/* .zhong {
  width: 100%;
  display: flex;
} */
.zan {
  width: 100vw;
  height: 0.89rem;
  z-index: 3;
}
.middle {
  width: 90%;
  margin: 0 auto;
}
.participate {
  position: relative;
  margin-bottom: 0.36rem;
}
.participate img {
  width: 100%;
  height: 1.35rem;
}
.participate span {
  position: absolute;
  bottom: -0.1rem;
  left: 2.3rem;
  background-color: #dc4949;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 0.57rem;
  width: 2.24rem;
  height: 0.57rem;
  color: rgba(255, 255, 255, 1);
  font-size: 0.24rem;
}
.shang {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.13rem;
}
.tui {
  font-size: 0.24rem;
  color: rgba(51, 51, 51, 1);
}
.dian {
  font-size: 0.23rem;
  color: #dc4949;
}
.xia {
  font-size: 0.22rem;
  margin-bottom: 0.23rem;
}
.xia ul {
  display: flex;
  justify-content: space-evenly;
}
.xia li {
  list-style: none;
  position: relative;
  width: 45%;
  display: inline-block;
}
.xia img {
  width: 100%;
}
.xia span {
  width: 100%;
  padding: 0.1rem 0;
  background-color: rgba(215, 215, 215, 0.3);
  color: rgba(51, 51, 51, 1);
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.jing ul {
  display: flex;
  justify-content: space-between;
}
.jing li {
  list-style: none;
  position: relative;
  width: 30%;
}
.jing img {
  width: 100%;
}
.jing span {
  position: absolute;
  bottom: -0.1rem;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(51, 51, 51, 1);
  font-size: 0.22rem;
}
.answer {
  margin-top: 0.4rem;
}
.answer p {
  color: rgba(51, 51, 51, 1);
  font-size: 0.24rem;
}
.si {
  margin-top: 0.2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.board {
  width: 100%;
  display: flex;
  height: 1.5rem;
  margin-bottom: 0.1rem;
  justify-content: space-around;
}
.ge {
  height: 1.5rem;
  width: 45%;
  border-radius: 0.2rem;
  background-color: #f4f4f4;
  position: relative;
}
.wen {
  position: absolute;
  font-size: 0.26rem;
  top: 0.1rem;
  left: 0.1rem;
  color: rgba(215, 215, 215, 1);
}
.ti {
  position: absolute;
  width: 1.25rem;
  height: 0.43rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.da {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.6rem;
  background-color: #dc4949;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.3rem;
  color: #eee;
  text-align: center;
  line-height: 0.6rem;
}
.bottom {
  width: 100vw;
  height: 0.83rem;
  position: fixed;
  bottom: 0;
  background-color: aqua;
}
.zan2 {
  width: 100vw;
  height: 0.98rem;
}
</style>
